<template>
  <div>
    <!-- 搜索 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="角色名称:">
        <el-input v-model="formInline.name" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit"
          ><el-icon><Search /></el-icon>&nbsp;&nbsp;搜索</el-button
        >
        <el-button type="primary" @click="clear"
          ><el-icon><Delete /></el-icon>&nbsp;&nbsp;清空</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 新增 -->
    <el-button type="primary" class="add" @click="addrolelist"
      ><el-icon><Plus /></el-icon>&nbsp;&nbsp;新增</el-button
    >
    <el-button type="danger" disabled>批量删除</el-button>
    <!-- 表格 -->
    <el-table :data="tableData" stripe style="width: 100%" border>
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="角色名称" />
      <el-table-column prop="desc" label="备注" />
      <el-table-column
        prop="createTime"
        label="创建时间"
        :formatter="formatter"
      />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.$index, scope.row)"
            ><el-icon><EditPen /></el-icon>&nbsp;&nbsp;编辑</el-button
          >
          <el-button
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            ><el-icon><Delete /></el-icon>&nbsp;&nbsp;删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog v-model="dialogFormVisible" title="新增" width="600px">
      <el-form :model="form" label-width="120px">
        <el-form-item label="角色名称">
          <el-input v-model="form.name" placeholder="角色名称" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.desc" placeholder="备注" />
        </el-form-item>
        <el-form-item label="授权">
          <el-tree
            node-key="id"
            @check="changeCheck"
            :data="menulist"
            :props="defaultProps"
            show-checkbox
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addlist"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="pagesize"
      :page-sizes="[2, 4, 6, 8]"
      :small="small"
      :disabled="disabled"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang='ts' setup>
import {
  Document,
  Menu as IconMenu,
  EditPen,
  Delete,
  Search,
  Plus,
} from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import {
  getrole,
  addrole,
  getrolelist,
  searchrole,
  delrole,
} from "../../../api/RoleApi";
import moment from "moment";
import { useMenu } from "../../../stores/menu";
import { getTreeFromList } from "../../../utils/index";
import { ElMessage, ElMessageBox } from "element-plus";

const menuStore = useMenu();

interface User {
  id: number;
  name: string;
  desc: string;
  createTime: string;
}

const small = ref(false);
const disabled = ref(false);

// 更改每页显示多少条
const handleSizeChange = (val: number) => {
  pagesize.value = val;
  render();
};

// 更改页数
const handleCurrentChange = (val: number) => {
  page.value = val;
  render();
};

// 总数
const total = ref(1);

// 当前在第几页
const page = ref(1);

// 每页显示多少条
const pagesize = ref(2);

// 树型菜单数据
const menulist = ref();

// 更改显示
const defaultProps = {
  children: "children",
  label: "name",
};

// 判断弹框是否打开
const dialogFormVisible = ref(false);

// 格式化时间
const formatter = (row: User, column: any) => {
  return moment(row.createTime).format("YYYY-MM-DD HH:mm:ss");
};

// 数据
const tableData = ref();

// 弹框的表单
const form = reactive({
  name: "",
  desc: "",
  menulist: [],
});

// 搜索的表单
const formInline = reactive({
  name: "",
});

onMounted(async () => {
  render();
  await menuStore.getMenulist();
  menulist.value = getTreeFromList(menuStore.menulist, 3);
});

// 渲染
const render = () => {
  let obj = {
    page: page.value,
    pagesize: pagesize.value,
  };
  getrole(obj).then((res) => {
    tableData.value = res.data.data;
  });
  getrolelist().then((res) => {
    total.value = res.data.data.length;
  });
};

// 点击搜索执行的函数
const onSubmit = () => {
  searchrole(formInline.name).then((res) => {
    tableData.value = res.data.data;
    total.value = res.data.data.length;
  });
};

// 点击清空执行的函数
const clear = () => {
  formInline.name = "";
  render();
};

// 获取树型列表的值
const changeCheck = (one: any, two: any) => {
  form.menulist = two.checkedKeys;
};

// 点击新增时执行的函数
const addrolelist = () => {
  dialogFormVisible.value = true;
};

// 点击确定执行的函数
const addlist = () => {
  dialogFormVisible.value = false;
  addrole(form).then((res) => {
    if (res.data.code == 1) {
      render();
    }
  });
};

// 点击修改执行的函数
const handleEdit = (index: number, row: User) => {
  console.log(index, row);
};

// 点击删除执行的函数
const handleDelete = (index: number, row: User) => {
  ElMessageBox.confirm("你确定要删除这个角色吗", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delrole(row.id).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          render();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
</script>

<style scoped>
.add {
  margin-bottom: 10px;
  float: left;
}
.el-pagination {
  float: right;
  margin-top: 10px;
}
</style>